<template>
  <div id="main"></div>
</template>

<script>
import * as zrender from "zrender";
import Axis from './axis'
export default {
  data() {
    return {
        testData: [
            ['a', 10, 50],
            ['b', 18, 12],
            ['c', 26, 75],
            ['d', 52, 2],
            ['e', 18, 69],
        ]
    };
  },
  mounted() {
    this.zr = zrender.init(document.getElementById("main"));
    this.xAxis = new Axis({
        tick:{
            splitLine:{
                length: 0
            }
        },
        axisName:{
            offset: [10, 0],
            style:{
                text: '万元'
            }
        }
    }, this.testData)
    this.zr.add(this.xAxis);
    this.yAxis = new Axis({
        XorY: 'y',
        dataIndex: 2,
        tick:{
            label:{
                offset: [-10, 0]
            }
        },
        axisName:{
            offset: [0, -10],
            style:{
                text: '万元'
            }
        }
    }, this.testData)
    this.zr.add(this.yAxis);
  }
};
</script>

<style scoped>
#main {
  width: 80vw;
  height: 90vh;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
